

<template>
    <div style="height:455px;width:100%;position:relative;">
        <div class="pagetop">
            <table class="table1style" style="width:100%">
                <tr>
                    <td align="center" v-show="showgroup!='1'" style="width:70px">快速查找</td>
                    <td v-show="showgroup!='1'" style="width:200px">
                        <el-input ref="refsearch" v-model="txtsearch" placeholder="商品代码|名称|输入码" style="width:100%" clearable></el-input>
                    </td>
                    <td align="center" v-show="showgroup=='1'" style="width:70px">商品组合</td>
                    <td v-show="showgroup=='1'" style="width:200px">
                        <el-select v-model="bomid" @change="InitPage" style="width:100%">
                            <el-option v-for="(item,index) in invbomOption" :key="index" :label="item.bomname" :value="item.bomid">
                                <span style="float: left">{{ item.bomname }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.bomid }}</span>
                            </el-option>
                        </el-select>
                    </td>
                    <td style="width:50px" align="center" v-show="showgroup=='1'">数量</td>
                    <td v-show="showgroup=='1'">
                        <el-input v-model="qty" type="number" @keyup.enter.native="qtyChange" style="width:70px"></el-input>
                    </td>
                    <td align="center" v-show="showvendor=='1'" style="width:70px">供应商</td>
                    <td v-show="showvendor=='1'" style="width:200px">
                        <rm-ddl-common datatype="invvendor" dataname="供应商" v-model="vendorid2" width="100%" ref="refpopvendor" key="1" @change="invvendorChange"></rm-ddl-common>
                    </td>
                    <td style="width:50px" align="center" v-show="showgroup!='1'">商品组</td>
                    <!--增加商品组，非组套录入显示商品组，组套录入不显示商品组-->
                    <td v-show="showgroup!='1'">
                        <rm-ddl-common datatype="invitemgroup" dataname="商品组" v-model="itemgroupid" width="120px" ref="refpopitemgroup" key="itemgroup" @change="itemgroupChange"></rm-ddl-common>
                    </td>
                    <td align="right">
                        <el-button @click="InitPage" icon="el-icon-search" type="primary">查询</el-button>
                        <el-button @click="AutoWrite" v-if="(shoulditem=='1'||showgroup=='1')">自动填充</el-button>
                        <el-button @click="btnConfirm" icon="el-icon-circle-check">确定</el-button>
                        <el-button @click="btnCancel" icon="el-icon-close">取消</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <vxe-table :data.sync="list" :loading="loading" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false}" @cell-dblclick="btnConfirm" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row class="mytablestyle" highlight-hover-column ref="xTable" resizable @select-change="selectChangeEvent" show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="selection" width="45" align="center"></vxe-table-column>
                    <vxe-table-column field="itemname" title="商品名称" width="200" sortable></vxe-table-column>
                    <vxe-table-column field="spec" title="规格" width="60" header-align="center" sortable> </vxe-table-column>
                    <vxe-table-column field="qty" title="数量" width="70" sortable align="right" :edit-render="{name:'input',autoselect:true}" v-if="showqty=='1'" header-align="center"></vxe-table-column>
                    <vxe-table-column field="cp_shouldpur" title="需采购量" width="70" v-if="(shoulditem=='1'||showgroup=='1')" align="right" header-align="center"></vxe-table-column>
                    <vxe-table-column :field="items.field" :key="items.title" :title="items.title" :width="items.width" sortable header-align="center" align="right" v-for="items in tableColumn"></vxe-table-column>
                    <!-- <vxe-table-column field="unit" title="采购单位" width="70" sortable align="center"></vxe-table-column> -->
                    <vxe-table-column field="stock" title="当前库存" width="70" sortable align="right" header-align="center"></vxe-table-column>
                    <vxe-table-column field="ministock" title="安全库存" width="70" v-if="(shoulditem=='1'||showgroup=='1')" align="right" header-align="center"></vxe-table-column>
                    <vxe-table-column field="safestock" title="常备库存" width="70" v-if="(shoulditem=='1'||showgroup=='1')" align="right" header-align="center"></vxe-table-column>
                    <vxe-table-column field="unit" title="采购单位" width="70" sortable align="center"></vxe-table-column>
                    <!-- <vxe-table-column field="stockunit" title="库存单位" width="65" sortable align="center"></vxe-table-column> -->
                    <vxe-table-column field="itemcode" title="商品代码" width="70" sortable></vxe-table-column>
                    <vxe-table-column field="outunit" title="出库单位" width="70" sortable align="center"></vxe-table-column>
                    <vxe-table-column field="miniunit" title="最小单位" width="70" sortable align="center"> </vxe-table-column>
                    <vxe-table-column field="itemgroupname" title="商品组" width="80" sortable></vxe-table-column>
                    <vxe-table-column field="itemna" title="商品简称" width="70" sortable></vxe-table-column>
                    <vxe-table-column field="inputcode" title="助记符" width="90" sortable> </vxe-table-column>
                    <vxe-table-column field="vendorname" title="供应商" width="115" sortable></vxe-table-column>
                    <vxe-table-column field="manufacturername" title="厂商" width="100" sortable> </vxe-table-column>
                    <vxe-table-column field="itemid" title="商品ID" width="60" sortable></vxe-table-column>
                </vxe-table>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    //vendorid:供应商（批量新增），shoulditem--导入需采购商品，showgroup--组套新增,showused--只显示开瓶项目
    props: { multiChk: { type: Boolean, default: true }, vendorid: { type: [Number, String], default: 0 }, shoulditem: { type: String, default: "0" }, showgroup: { type: String, default: "0" }, showvendor: { type: String, default: "0" }, showqty: { type: String, default: "1" }, showused: { type: String, default: "0" }, xdays: { type: String } },
    data() {
        return {
            loading: false,
            txtsearch: "",
            ddlitemclass: "",
            bomid: "",
            qty: "",
            vendorid2: "",
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
                isArrow: true,
            },
            keyLocalConfig: {
                isArrow: true,
            },
            selectConfig: { tigger: "row", checkAll: this.showgroup == 1 }, //如果是商品组合，默认勾选所有
            tableData: [],
            invbomOption: [],
            vendorid2Option: [],
            curRow: [],
            groupkey: 0,
            itemgroupid: "", 
            tableColumn: [{ field: "cp_xdaysagooutqty", title: this.xdays + "内出库量", width: "100" }],
        };
    },
    mounted() {
        // this.multiChk = this.multiChk;
        // console("multiChk", this.multiChk);
    },
    updated() {},
    created() {
        if (this.showgroup == "1") {
            //组套
            this.initData();
        } else {
            this.InitPage(); //初始化主列表
        }

        //this.getinitdata(); //初始化下拉框的数据
    },
    watch: {
        txtsearch(val) {
            this.$nextTick(() => {
                this.loadFirstRow(this.$refs.xTable, "");
            });
        },
    },
    computed: {
        list() {
            let filterName = this.txtsearch.trim();
            if (filterName) {
                let rest = this.tableData.filter((item) => {
                    return item.itemcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.itemname ? item.itemname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
                });
                return rest;
            } else {
                return this.tableData;
            }
        },
    },
    mounted() {
        if (this.$refs.refsearch) this.$refs.refsearch.focus();
    },
    updated() {},
    methods: {
        initData() {
            this.$tool
                .request({
                    url: "INV/INV1/INV126",
                    method: "post",
                    data: {
                        action: "lab_itemcomb_query",
                    },
                })
                .then((res) => {
                    this.invbomOption = res.data;
                })
                .catch((e) => {
                    this.$alert(e, "出错");
                });
        },
        InitPage() {
            this.loading = true;
            this.$tool
                .request({
                    url: "ucent/ddl",
                    method: "post",
                    data: {
                        action: "invitem2",
                        ddlitemclass: this.ddlitemclass,
                        bomid: this.bomid,
                        vendorid: this.showvendor == "1" ? this.vendorid2 : this.vendorid,
                        shoulditem: this.shoulditem,
                        showused: this.showused,
                        itemgroupid: this.itemgroupid,
                    },
                })
                .then((res) => {
                    this.tableData = res.data;
                    this.loadFirstRow(this.$refs.xTable, "");
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        itemgroupChange(code) {
            this.itemgroupid = code;
            this.InitPage();
        },
        itemclassChange(code) {
            this.ddlitemclass = code;
            this.InitPage();
        }, //数量改变
        qtyChange() {
            let data = this.$refs.xTable.getSelectRecords();
            if (data.length > 0) {
                data.forEach((item) => {
                    item.qty = this.qty;
                    item.amount = Number(item.qty) * Number(item.listprice);
                });
                this.$refs.xTable.updateListenter();
            } else {
                this.$alert("请先选择数据！", "信息");
            }
        },
        btnConfirm({ row, column }) {
            if (this.multiChk) {
                //如果支持多选
                let data = this.$refs.xTable.getSelectRecords();
                if (data.length > 0) {
                    this.$emit("change", data);
                } else {
                    this.$alert("请先勾选数据！", "提示");
                }
            } else {
                //不支持多选
                this.$emit("change", this.curRow.itemid, this.curRow.itemname, this.curRow);
            }
        },
        btnCancel() {
            this.$emit("cancel");
        },
        currentChangeEvent({ row }) {
            this.curRow = row;
        },
        //自动加载表格的第一行，并执行回调函数
        loadFirstRow(xTable, func) {
            this.$nextTick(() => {
                // 加载第一行
                var selectrow = xTable.getData(0);
                if (selectrow) {
                    xTable.setCurrentRow(selectrow).then(() => {
                        xTable.scrollToRow(selectrow).then(() => {
                            if (typeof func == "function") func(selectrow);
                            //滚动到行后操作，如用来高亮后赋值
                            else this.curRow = selectrow;
                        }); //滚动到行
                    }); //高亮行
                } else {
                    xTable.setCurrentRow(null); //这个不会自动清空
                }
            });
        },
        selectChangeEvent({ selection, checked, row, rowIndex }) {
            if (checked) this.$refs.xTable.setActiveCell(row, "qty");
        },
        invvendorChange(code, name) {
            this.vendorid2 = code;
            this.InitPage();
        },
        AutoWrite() {
            let data = this.$refs.xTable.tableData;
            if (data.length > 0) {
                data.forEach((item) => {
                    if (!!item.cp_shouldpur) item.qty = item.cp_shouldpur.toFixed(2);
                });
            }
            this.$refs.xTable.updateListenter();
        },
    },
};
</Script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 400px;
    left: 0px;
    right: 0px;
    overflow: auto;
}
.table1style tr td {
    padding: 0px 2px 0px 2px;
    font-size: 12px;
}
</style>